<template>
  <div class="err-box" v-if="errs.length > 0">
    <div class="err-label">
      错误提示：
      <span
        v-if="errs.length > 1"
        class="open-icon"
        :class="{ 'open-icon-reverse': isOpenErr }"
        @click="changeOpen"
      >
        <el-icon><DArrowRight /></el-icon>
        {{ isOpenErr ? '收起' : '展开' }}
      </span>
    </div>
    <div class="err-value">
      <div class="err-item" v-for="(item, index) in errList" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { checkDynamicForm, checkPlatformDynamicForm } from '@/api/dynamic-form';
const props = defineProps({
  topExpose: {
    type: Object,
    default: () => {}
  },
  tableInfo: {
    type: Object,
    default: () => {}
  }
});

const errs = ref([]);
const isOpenErr = ref(true);
function changeOpen() {
  isOpenErr.value = !isOpenErr.value;
}
const errList = computed(() => {
  if (isOpenErr.value) return errs.value;
  return errs.value.slice(0, 1);
});

function validate() {
  return new Promise((resolve, reject) => {
    const values = props.topExpose.initValues();
    const api = {
      company: checkDynamicForm,
      platform: checkPlatformDynamicForm
    }[props.topExpose.form_role];
    api({
      form_uni_key: props.topExpose.form_uni_key,
      values,
      field_value: values.find(item => item.field === props.tableInfo.field)
    })
      .then(res => {
        if (res.data.success) {
          errs.value = [];
          resolve();
        } else {
          errs.value = res.data.errors || [];
          reject();
        }
      })
      .catch(() => {
        reject();
      });
  });
}

defineExpose({ validate });
</script>

<style lang="scss" scoped>
.err-box {
  color: var(--el-color-danger);
  display: flex;
  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  // padding-top: 7px;
}
.err-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.err-value {
  max-height: 200px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
}
.err-label {
  display: flex;
  flex-wrap: nowrap;
}

.open-icon {
  user-select: none;
  color: var(--el-color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 20px;
  width: 50px;
  margin-right: 5px;
  .el-icon {
    transform: rotate(90deg);
    line-height: 20px;
    margin-right: 3px;
    transition: all 0.2s;
  }
}

.open-icon-reverse {
  .el-icon {
    transform: rotate(-90deg);
  }
}
</style>
